<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
    需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
    需求2：定义一个v-fbind，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
    
    自定义指令总结：
        一、定义语法：
            (1).局部指令：
                new Vue({
                  directives:{指令名:配置对象}
                }) 
                或
                new Vue({
                  directives{指令名:回调函数}
                })
            (2).全局指令：
                Vue.directive(指令名,配置对象)
                或
                Vue.directive(指令名,回调函数)
        
        二、配置对象中常用的3个回调：
            (1).bind：指令与元素成功绑定时调用
            (2).inserted：指令所在元素被插入页面时调用
            (3).update：指令所在模板结构被重新解析时调用
        三、备注：
            1.指令定义时不加v-，但使用时要加v-
            2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

  -->
  <div id="root">
    <h2>{{name}}</h2>
    <h2>当前的n值是：<span v-text="n"></span> </h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
    <button @click="n++">点我n+1</button>

    <hr>
    <input type="text" v-fbind:value="n">

  </div>
</body>

<script>
  Vue.config.productionTip = false
  new Vue({
    el: '#root',
    data: {
      n: 1,
      name: 'ccc'
    },
    directives: {
      // big函数的调用时机：1.指令与元素成功绑定时。2.指令所在的模板被重新解析时
      big(element, binding) {
        element.innerText = binding.value * 10
      },
      fbind: {
        // 指令与元素成功绑定时
        bind(element, binding) { 
          element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) { 
          element.focus()
        },
        // 指令所在模板被重新解析时
        update(element, binding) {
          // console.log('update')
          element.value = binding.value
          element.focus()
        }
      }
    }
  })
</script>

</html>